<template>
  <div id="area" >
    <el-tabs style="margin-left: 15px" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane  name="first"><span slot="label">首页</span> <dashboard v-if="activeName=='first'" ></dashboard></el-tab-pane>
      <el-tab-pane  name="second"><span slot="label">业务线</span><biz v-if="activeName=='second'"  ></biz></el-tab-pane>
      <el-tab-pane  name="third"><span slot="label">系统</span> <system v-if="activeName=='third'"   ></system></el-tab-pane>
      <el-tab-pane  name="four"><span slot="label">用例记录</span> <caseRecord v-if="activeName=='four'"   ></caseRecord></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

  import dashboard from "@/views/reportTable/components/dashboard";
  import system from "@/views/reportTable/components/system";
  import biz from "@/views/reportTable/components/biz";
  import caseRecord from "@/views/reportTable/components/caseRecord";
  export default {
    name: 'reportTable',
    components: {
      dashboard,
      system,
      biz,
      caseRecord
    },
    created () {
      console.log("created")
      this.activeName = localStorage.getItem("tabIndex") || "first"
    },
    mounted() {

    },

    data () {
      return {
        activeName:"first",
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
        localStorage.setItem("tabIndex",this.activeName)
      },

    },

    computed: {

    },
    watch: {

    },
  }

</script>

<style scoped lang="scss">
  #area{
    width: 100%;
    margin:20px auto;
    min-height: 100vh;
    /*border: 1px solid #e8e8e8;*/
    border-radius: 5px;

  }
  .echart{
    width: 100%;
    min-height: 400px;
    border-radius: 5px;
    box-shadow: 3px 3px 5px 5px rgba(224, 200, 209, .5);
  }


</style>
